import React, { useEffect, useState, useMemo, useContext } from 'react'
import TopNav from '../../../components/TopNav/TopNav'
import { useNavigate, useLocation } from 'react-router'
import { ArrowLeft, GuideO } from '@react-vant/icons';
import { Card, Input, Button, Popup } from 'react-vant'
import './messagedetail.css'
import SelectUser from './SelectUser';
import axios from 'axios';


const MessageDetail = () => {
    // 跳转
    const navigate = useNavigate()
    // 通过路由获取参数
    const location = useLocation()
    const [state, setState] = useState('')
    // 点击返回
    const onClose = () => setState('')
    // 获取到输入框内输入的值
    const [value, setValue] = useState('')
    // 通过判断输入的内容进行调用弹出层
    const [visible, setVisible] = useState(false)
    // 通过判断输入的内容进行调用弹出层
    useEffect(() => {
        // 如果输入框的内容为@则弹出层显示
        if (value == "@") {
            setVisible(true);
        } else {
            // 如果输入框的内容不为@则弹出层隐藏
            setVisible(false);
        }
    }, [value]);
    // 接收子组件传递的数据
    const handleDataFromChild = (data) => {
        // 将子组件传递过来的数据添加到输入框中
        setValue(value + data.userTitle)
    }
    // 获取路由传递的数据
    const itemId = location.state?.item
    console.log(itemId);
    const [data, setData] = useState([])
    // 新增状态用于存储从本地存储读取的团队数据
    const [localTeamData, setLocalTeamData] = useState('');
    const Init = async () => {
        const res = await axios.get('http://192.168.0.154:3000/my/messageDetail')
        setData(res.data)
        if (itemId && itemId.team) {
            localStorage.setItem('teamData', itemId.team);
        }
        if (itemId && itemId.crowdImage) {
            localStorage.setItem('crowdImage', itemId.crowdImage);
        }
    }
    useEffect(() => {
        Init()
        const storedTeamData = localStorage.getItem('teamData');
        if (storedTeamData) {
            setLocalTeamData(storedTeamData);
        }

        const interval = setInterval(() => {
            Init(); // 定期获取数据  
        }, 100); // 每5秒请求一次数据，您可以根据需要调整时间  

        return () => clearInterval(interval); // 清除定时器  
    }, [])
    const addMessage = [{
        UserName: "你",
        UserTime: new Date().toLocaleString(),
        UserContent: value,
        //    获取头像
        userImage: '../Message/MessageImg/user1.png'

    }]
    // //    添加到json数据中
    const addData = async () => {
        await axios.post('http://192.168.0.154:3000/my/messageDetail', addMessage[0]);
        console.log(addMessage[0]);
        setValue('');
        // 添加成功后重新获取数据
        await Init();
    };
    return (
        <div>
            <TopNav />
            {/* 返回 */}
            <div className='message-detail-back' onClick={() => { navigate('/message') }}>
                <ArrowLeft />
                <p>返回消息</p>
            </div>
            {/* 当前项目的名称 */}
            <div className='message-detail-title'>
                {/* 如果是首次进入该页面则直接渲染标题，如果是从群组详情页返回则从本地存储读取当前存储的标题 */}
                <p>{itemId?.team || localTeamData}</p>
            </div>
            {/* 卡片区域 */}
            <Card className='message-detail-card'>
                {/* 卡片的人物和岗位 */}
                <div className='message-detail-header'
                    onClick={() => {
                        navigate('/crowddetail', { state: { item: itemId } })
                    }}
                >
                    <img src='../Message/MessageImg/user4.png' />
                    <div className='message-detail-header-name'>
                        <p>小张</p>
                        <p>UI/UX 界面设计师</p>
                    </div>
                </div>
                {/* 聊天消息的内容 */}
                <div className='message-detail-content'>
                    <div className='message-detail-content-date'>
                        <p>9月8日,星期五</p>
                    </div>

                    <div className='message-detail-content-user'>
                        {
                            data.map((item, index) => {
                                return (
                                    <div key={index} style={{ marginBottom: '20px' }}>
                                        {/* 用户的头像、名字、时间和内容 */}
                                        <div className='message-detail-content-user-img'>
                                            {/* 用户的头像 */}
                                            <img src={item.userImage} style={{ width: '50px' }} />
                                            {/* 用户名字和时间 */}
                                            <div className='message-detail-content-user-name'>
                                                <p className='message-detail-content-user-name-text'>{item.UserName}</p>
                                                <p className='message-detail-content-user-name-text'> {item.UserTime}</p>
                                            </div>
                                        </div>
                                        {/* 用户的聊天内容 */}
                                        <div className='message-detail-content-user-text'>
                                            <p>
                                                {item.UserContent}
                                            </p>
                                        </div>
                                    </div>
                                )
                            })
                        }
                        {/* 输入框 */}
                        <div className='message-detail-content-user-input'>
                            <Input
                                value={value}
                                onChange={(v) => {
                                    // 调用函数，监听输入框内的值变化
                                    // 输入框的值
                                    setValue(v);
                                    // 从底部弹出
                                    setState('bottom')
                                    // console.log(v);
                                }}
                                clearable
                                clearTrigger="always"
                                suffix={<Button size="small" type="primary" color='#598dff'
                                    onClick={() => {
                                        // 发送按钮点击事件
                                        addData()
                                    }}
                                ><GuideO style={{ fontSize: '20px' }} /></Button>}
                                placeholder="在这里输入你的消息···"
                                style={{ width: '100%', height: '50px' }}
                            />
                            <Popup
                                visible={visible}
                                style={{ height: '30%' }}
                                position='bottom'
                                onClose={onClose}
                            >
                                <SelectUser close={() => { setVisible(false) }} onSendData={handleDataFromChild} />
                            </Popup>
                        </div>
                    </div>
                </div>

            </Card>
        </div>
    )
}

export default MessageDetail